<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>

<html>

<%@page import="domain.*"%>
<%@page import="java.util.*"%>

<% 
	String scheduleId = (String) request.getAttribute("scheduleId");
	Person currentUser = (Person) request.getAttribute("currentUser");
%>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<link rel="icon" type="image/gif" href="./resources/images/animated_favicon1.gif">
	<!-- link rel="shortcut icon" href="favicon.ico" -->
	
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=th"></script>
<script type="text/javascript" src="./resources/tileoverlay_uncompressed.js"></script>
<script type="text/javascript" src="./resources/center.js"></script>
<script type="text/javascript" src="./resources/googleAPI.js"></script>
<script type="text/javascript" src="./resources/traffyAPI.js"></script>

<link href="./resources/jquery.mobile-1.0a3.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./resources/jquery.js"></script>
<script type="text/javascript" src="./resources/jquery.mobile-1.0a3.js"></script>
<style type="text/css">
html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map_canvas {
  height: 100%;
  width: 100%;
  position: absolute;
  bottom:0;
  left:0;
  right:0;
  top:0;
}


#directionsPanel {
	height: 87%;
	width: 100%;
  	position: absolute;
  	overflow: scroll;
}
</style>

<title>Schedule On Map</title>
<script type="text/javascript">

var directionsService = new google.maps.DirectionsService();
	
	function init() {
		var getTraffic = "traffy"; //traffy or google
		createMap(13.711428, 100.594103, "map_canvas", getTraffic, true);
		directionsDisplay.setPanel(document.getElementById("directionsPanel"));

		google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
		    computeTotalDistance(directionsDisplay.directions);
		  });
		
		// Create the DIV to go to detail page
		var detailControlDiv = document.createElement('DIV');
		var detailControl = new DetailControl(detailControlDiv, map);

		detailControlDiv.index = 1;
		map.controls[google.maps.ControlPosition.TOP_RIGHT].push(detailControlDiv);

		//GET Current Location
		getCurrentLocationLoop();
		
		// GET INCIDENTS
		getIncidents();
		
		// GET VMS
		getVMS();

		// GET CCTV
		getCCTV();

		// GET POS
		getPOS();
		
	}
	
	var controlUI = document.createElement('DIV');
	function DetailControl(controlDiv, map) {

	  // Set CSS styles for the DIV containing the control
	  // Setting padding to 5 px will offset the control
	  // from the edge of the map
	  controlDiv.style.padding = '5px';

	  // Set CSS for the control border
	  controlUI.style.padding = '3px';
	  controlUI.style.backgroundColor = 'gray';
	  controlUI.style.borderStyle = 'solid';
	  controlUI.style.borderWidth = '2px';
	  controlUI.style.borderColor = 'silver';//#B9C6EF
	  controlUI.style.cursor = 'pointer';
	  controlUI.style.textAlign = 'center';
	  controlUI.title = 'Click to see details';
	  controlDiv.appendChild(controlUI);

	  // Set CSS for the control interior
	  var controlText = document.createElement('DIV');
	  controlText.style.fontFamily = 'Arial,sans-serif';
	  controlText.style.fontSize = '12px';
	  controlText.innerHTML = 'Details';
	  controlUI.appendChild(controlText);

	  // Setup the click event listeners
	  google.maps.event.addDomListener(controlUI, 'click', function() {
		  $('#pageLink').click();
	  });
	}
	
	var t;
	function getCurrentLocationLoop(){
		getCurrentLocation();
		// Update Driver's Location
		if(currentLat!=null && currentLng!=null){
			var request = createXMLHttpRequest();
			request.open('post','./AJAX?todo=updateLocation&personId=<%=currentUser.getId()%>&currentLat='+currentLat+'&currentLng='+currentLng,false);
			request.send(null);
		}
		
		t=setTimeout("getCurrentLocationLoop()",6000); // every minute;
	}

	function computeTotalDistance(result) {
	  var total = 0;
	  var myroute = result.routes[0];
	  for (i = 0; i < myroute.legs.length; i++) {
	    total += myroute.legs[i].distance.value;
	  }
	  total = total / 1000.;
	  document.getElementById("total").innerHTML = total + " km";
	}   
	
	function addPOS(lat, lng, title){
		var pointLatlng = new google.maps.LatLng(lat, lng);
		var marker3 = new google.maps.Marker( {
			position :pointLatlng,
			map :map,
			title :title
		});

		var contentString = '<div id="bodyContent">'+title+'</div>';
		
		var infowindow = new google.maps.InfoWindow( {
			content :contentString
		});

		google.maps.event.addListener(marker3, 'click', function() {
			infowindow.open(map, marker3);
		});
	}

	function getPOS(){
		var request = createXMLHttpRequest();
		
		request.open('get','./AJAX?todo=getPOS&scheduleId=<%=scheduleId%>',false);
		request.send(null);
		var posList = eval("(" + request.responseText + ")");

		var start;
		var end;
		var length = posList.pos.length;
		if(length != 0){
			start = new google.maps.LatLng(posList.pos[0].lat, posList.pos[0].lng);
			end = new google.maps.LatLng(posList.pos[length-1].lat, posList.pos[length-1].lng);
		}

		var waypts = [];
		for( var i=1; i<length-1; i++){
			var pos = posList.pos[i];
			var wayPoint = new google.maps.LatLng(posList.pos[i].lat, posList.pos[i].lng);
			waypts.push({
	          	location:wayPoint,
	          	stopover:true
      		});
		}

		var req = {
			   	origin:start, 
			    destination:end,
			    waypoints: waypts,
			    optimizeWaypoints: false,
			    travelMode: google.maps.DirectionsTravelMode.DRIVING
			};
			directionsService.route(req, function(result, status) {
				if (status == google.maps.DirectionsStatus.OK) {
				    directionsDisplay.setDirections(result);
				}
			});
	}
	
	function showPanel(){
		document.getElementById("directionsPanel").style.visibility = 'visible';
	}

</script>
</head>
<body onload="init()">
	<form id="homeSubmit">
		<input type="hidden" name="todo" value="home"/>
	</form>
	<div data-role="page" data-theme="a" id="mainPage" >
		<div data-role="content" >
			<a id="pageLink" href="#detailPage" data-transition="flip" style="display: none;">Details</a>
			<div id="map_canvas" ></div> 
		</div><!-- /content -->
	</div><!-- /page -->
	
	<div data-role="page" data-theme="a" id="detailPage">

	<div data-role="header" data-position="inline">
		<h1>Details</h1>
		<a href="javascript:homeSubmit('Login')" data-icon="home" class="ui-btn-right" data-iconpos="notext"></a>
		</div><!-- /header -->
	
		<div data-role="content" >
			<div id="directionsPanel">
				<p>Total Distance: <span id="total"></span></p> 
			</div>
		</div><!-- /content -->
	</div><!-- /page -->
	
</body>
</html>